<template>
  <div>
    <el-button plain @click="dnhz()" :cc="fot" type="primary">{{
      fottext
    }}</el-button>
    <el-col :span="17">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>驾驶证管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <!-- 所有用户信息 -->
    <template>
      <el-table :data="curtableData" style="width: 100%" v-loading="loading">
        <el-table-column label="姓名" width="150" prop="username" fixed>
        </el-table-column>
        <el-table-column prop="date_jsz" label="首次领证日期" width="210">
        </el-table-column>
        <el-table-column prop="first_hz" label="第一次换证日期" width="210">
        </el-table-column>
        <el-table-column prop="second_hz" label="第二次换证日期" width="210">
        </el-table-column>
        <el-table-column prop="call" label="联系电话" width="230">
        </el-table-column>
        <el-table-column label="驾驶证图片" width="230">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="look(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          :page-size="pageSize"
          :current-page="curPage"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
      <!-- 分页 -->
    </template>
  </div>
</template>
    <!-- alluserinfo end -->

<script>
import unit from "../../../unit/unit";
import moment from "moment";
export default {
  name: "alluser",
  data() {
    return {
      loading: true,
      curPage: 1,
      pageSize: 15,
      tableData: [],
      time: moment().format("YYYY"),
      num: 0,
      num_: 0,
      url: "",
      tmp_tableData: [],
      fot: false,
      fottext: "当年换证",
    };
  },
  // 获取用户信息
  created() {
    // 清空
    unit.setCookie("mouth", "");
    unit.setCookie("pages", "");
    unit.setCookie("selectdate", "");
    // 获取文件IP地址
    this.$axios.get("/api/ip").then((res) => {
      this.url = res.data.data;
    });
    let id = "LXuao";
    this.$axios({
      method: "POST",
      url: "/api/getAlluser",
      data: {
        id: id,
        LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
      },
    }).then((res) => {
      let data = res.data.data;
      data.map((e, i) => {
        if (e.date_jsz != "") {
          if (e.date_jsz != "null") {
            this.tableData.push(e);
            let d = e.date_jsz.substring(0, 4);
            e.first_hz = e.date_jsz.replace(d, Number(d) + 6);
            if (this.time == e.first_hz.slice(0, 4)) {
              e.first_hz = (
                <span style="color:red">
                  {e.date_jsz.replace(d, Number(d) + 6)}
                </span>
              );
            }
            e.second_hz = e.date_jsz.replace(d, Number(d) + 16);
            if (this.time == e.second_hz.slice(0, 4)) {
              e.second_hz = (
                <span style="color:red">
                  {e.date_jsz.replace(d, Number(d) + 16)}
                </span>
              );
            }
            if (Number(this.time) == Number(d) + 6) {
              this.num = this.num + 1;
            }
          }

          if (e.img_jsz != "" && e.img_jsz != null) {
            e.img_jsz = this.url + e.img_jsz.replace("\\", "/").substring(7);
          }
        }
      });
      // this.tableData = res.data.data;
      setTimeout(() => {
        this.loading = false;
        if (this.num != 0) {
          this.$notify({
            title: "提示",
            message: "本年有" + this.num + "位车主需要首次更换驾驶证！",
            type: "info",
          });
        }
        if (this.num_ != 0) {
          this.$notify({
            title: "提示",
            message: "本年有" + this.num_ + "位车主需要第二次更换驾驶证！",
            type: "info",
          });
        }
      }, 500);
    });
    this.tmp_tableData = this.tableData;
  },
  computed: {
    total(i, row) {
      return this.tableData.length;
    },
    curtableData() {
      const curPage = this.curPage;
      const pageSize = this.pageSize;
      return this.tableData.slice((curPage - 1) * pageSize, pageSize * curPage);
    },
  },

  methods: {
    currentChange(val) {
      this.curPage = val;
    },
    look(i, e) {
      if (e.img_jsz == "" || e.img_jsz == null) {
        this.$alert("暂无图片！", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        // console.log(e.img_jsz);
        window.open(e.img_jsz);
      }
    },
    // 当店换证
    dnhz() {
      this.$axios.get("/api/ip").then((res) => {
        if (res.data.status == -1) {
          this.$message({
            message: "配置文件丢失!",
            type: "error",
          });
        } else {
          this.url = res.data.data;
        }
      });

      let tmp = [];
      this.fot = this.fot == false ? true : false;
      if (this.fot) {
        this.fottext = "所有用户";
        this.tableData.forEach((e, i) => {
          if (e.first_hz instanceof Object || e.second_hz instanceof Object) {
            tmp.push(e);
          }
        });
        this.tableData = tmp;
      } else {
        this.fottext = "当年换证";
        this.tableData = this.tmp_tableData;
      }
    },
  },

  components: {},
};
</script>
<style scoped>
.el-popper[x-placement^="bottom"] {
  margin-top: -39px;
  left: 800px !important;
}
.el-table {
  width: 80% !important;
}
</style>